<template>
    <div class="nav_con">
        <ul class="nav1_list">
            <li class="nav1_item" :class="type==1?'nav1_active':''" @click="change(1)">
                <a href="javascript:;">
                    <div class="nav1_img">
                        <img src="/static/images/dzb.png" alt="" class="show">
                        <img src="/static/images/dzb_active.png" alt="" class="hide">
                    </div>
                    <div class="nav1_name">第一党支部</div>
                </a>
            </li>
            <li class="nav1_item" :class="type==2?'nav1_active':''" @click="change(2)">
                <a href="javascript:;">
                    <div class="nav1_img">
                        <img src="/static/images/dzb.png" alt="" class="show">
                        <img src="/static/images/dzb_active.png" alt="" class="hide">
                    </div>
                    <div class="nav1_name">第二党支部</div>
                </a>
            </li>
        </ul>
        <ul class="nav_list">
            <li class="nav_item" :class="route=='/work/view'?'nav_active':''">
                <a :href="'#/work/view?type='+this.type">
                    工作室概况
                </a>
            </li>
            <li class="nav_item"  :class="route=='/work/notice'?'nav_active':''">
                <a :href="'#/work/notice?type='+this.type">
                    公告栏
                </a>
            </li>
            <li class="nav_item"  :class="route=='/work/study'?'nav_active':''">
                <a :href="'#/work/study?type='+this.type">
                    理论学习
                </a>
            </li>
            <li class="nav_item"  :class="route=='/work/active'?'nav_active':''">
                <a :href="'#/work/active?type='+this.type">
                    工作动态
                </a>
            </li>
            <li class="nav_item"  :class="route=='/work/display'?'nav_active':''">
                <a :href="'#/work/display?type='+this.type">
                    成果展示
                </a>
            </li>
            <li class="nav_item"  :class="route=='/work/example'?'nav_active':''">
                <a :href="'#/work/example?type='+this.type">
                    榜样力量
                </a>
            </li>
            <li class="nav_item" :class="route=='/work/email'?'nav_active':''">
                <a :href="'#/work/email?type='+this.type">
                    书记信箱
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'commonNav',

    data() {
        return {
            route:'',
            type:2
        };
    },
    created(){
        console.log(this.$route)
        this.route = this.$route.path
    },
    watch:{
        $route:{
            handler(newval,oldval){
                console.log('newval:',newval)
                console.log('oldval:',oldval)
                this.route = newval.path
            },
            deep:true,
            immediate:true
        },
        type:{
            handler(newval,oldval){
                console.log(newval)
                this.$router.push({
                    path:this.route+'?type='+newval
                })
            },
            deep:true,
            immediate:true
        }
    },
    mounted() {
        
    },

    methods: {
        change(status){
            this.type = status
            this.$emit('typechange',this.type)
        }
    },
};
</script>

<style lang="scss" scoped>
   @import  '@/assets/css/common.scss';
</style>